<template>
  <div class="container">
    <Navbar />
    
    <div v-if="car">
      <!-- 详情头部 -->
      <div class="detail-header">
        <div class="detail-image" :style="{ backgroundColor: car.bgColor }">
          <div class="image-nav">
            <div class="image-nav-dot active"></div>
            <div class="image-nav-dot"></div>
            <div class="image-nav-dot"></div>
          </div>
        </div>
        <div class="detail-info">
          <div class="detail-title">
            <span>{{ car.name }}</span>
            <div class="btn-group">
              <button class="btn-outline"><i class="far fa-heart"></i> 收藏</button>
              <button class="btn-primary"><i class="fas fa-share-alt"></i> 分享</button>
            </div>
          </div>
          <div class="detail-meta">
            <div><i class="fas fa-tag"></i> {{ car.type }}</div>
            <div><i class="fas fa-trophy"></i> {{ car.level }}</div>
            <div><i class="fas fa-eye"></i> {{ car.views }}次查看</div>
          </div>
          
          <div class="rating-large">
            <div class="stars">
              <i class="fas fa-star" v-for="n in 5" :key="n"></i>
            </div>
            <div class="rating-value">{{ car.rating }}</div>
            <div class="rating-count">({{ car.ratingCount }}人评分)</div>
          </div>
          
          <table class="property-table">
            <tr v-for="(prop, index) in car.properties" :key="index">
              <th>{{ prop.label }}</th>
              <td>{{ prop.value }}</td>
            </tr>
          </table>
        </div>
      </div>
      
      <!-- 评分区域 -->
      <div class="rating-section">
        <h3>为这款赛车评分</h3>
        <div class="star-rating">
          <i 
            v-for="n in 5" 
            :key="n"
            :class="userRating >= n ? 'fas fa-star' : 'far fa-star'"
            @click="userRating = n"
          ></i>
        </div>
      </div>
      
      <!-- 标签页 -->
      <div class="tabs">
        <div 
          v-for="(tab, index) in tabs" 
          :key="index" 
          :class="{ 'tab': true, 'active': activeTab === index }"
          @click="activeTab = index"
        >
          {{ tab.name }}
        </div>
      </div>
      
      <div class="tab-content">
        <div v-if="activeTab === 0">
          <p>{{ car.description }}</p>
          <p v-if="car.additionalInfo" style="margin-top: 10px;">{{ car.additionalInfo }}</p>
        </div>
        <div v-else-if="activeTab === 1">
          <p>{{ car.features }}</p>
        </div>
        <div v-else-if="activeTab === 2">
          <p>{{ car.compatibility }}</p>
        </div>
        <div v-else-if="activeTab === 3">
          <!-- 评论区 -->
          <div class="comments-section">
            <h3 style="margin-bottom: 20px;">评论区</h3>
            
            <div class="comment-form">
              <textarea v-model="newComment" placeholder="分享你对这款赛车的看法..."></textarea>
              <div class="form-actions">
                <button class="btn-primary" @click="addComment">发表评论</button>
              </div>
            </div>
            
            <div class="comment-list">
              <div v-for="(comment, index) in car.comments" :key="index" class="comment">
                <div class="comment-header">
                  <div class="commenter">
                    <div class="commenter-avatar"></div>
                    <div>
                      <div class="commenter-name">{{ comment.username }}</div>
                      <div class="comment-date">{{ comment.date }}</div>
                    </div>
                  </div>
                  <div class="comment-rating">
                    <i class="fas fa-star" v-for="n in comment.rating" :key="n"></i>
                  </div>
                </div>
                <div class="comment-content">
                  {{ comment.content }}
                </div>
                <div class="comment-actions">
                  <div class="comment-action"><i class="far fa-thumbs-up"></i> 喜欢 ({{ comment.likes }})</div>
                  <div class="comment-action"><i class="far fa-comment"></i> 回复</div>
                </div>
              </div>
            </div>
            
            <!-- 查看更多评论 -->
            <div style="text-align: center; margin-top: 20px;">
              <button class="btn-outline" style="padding: 10px 20px;">查看更多评论</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 相关赛车推荐 -->
    <div class="related-section">
      <h2>相关赛车推荐</h2>
      <div class="card-grid">
        <div v-for="(relatedCar, index) in relatedCars" :key="index" class="card">
          <div class="card-img" :style="{ backgroundColor: relatedCar.bgColor }">
            <div class="card-badge">{{ relatedCar.level }}</div>
          </div>
          <div class="card-content">
            <div class="card-title">{{ relatedCar.name }}</div>
            <div class="card-meta">
              <div class="card-type">{{ relatedCar.type }}</div>
              <div class="card-rating">
                <i class="fas fa-star"></i>
                <span>{{ relatedCar.rating }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 赛车详情页组件
 * @component CarDetail
 */
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Navbar from '../../components/Navbar.vue'

const route = useRoute()
const carId = ref(route.params.id)
const userRating = ref(0)
const newComment = ref('')
const activeTab = ref(0)

// 标签页数据
const tabs = ref([
  { name: '简介' },
  { name: '特点分析' },
  { name: '兼容宠物' },
  { name: '评论 (24)' }
])

// 添加评论方法
const addComment = () => {
  if (!newComment.value.trim()) return
  
  // 在实际应用中，这里会发送评论到后端
  console.log('提交评论:', newComment.value)
  
  // 清空评论框
  newComment.value = ''
}

// 获取详情数据
const car = ref({
  id: carId.value,
  name: '雷诺特技车',
  type: 'A车',
  level: 'S级',
  rating: '4.9',
  ratingCount: '120',
  views: '15,876',
  bgColor: '#3a8bff',
  description: '雷诺特技车是QQ飞车中最顶级的A车之一，拥有出色的操控性和极速表现。其平衡的性能使其在各种赛道上都能表现良好，尤其适合技术成熟的玩家。',
  additionalInfo: '该车的飘逸性能尤为突出，使其在弯道处理上有极大优势，即使在高速情况下也能稳定控制。',
  features: '雷诺特技车以其稳定的操控性和高速度著称，在长直道和连续弯道均有出色表现。车辆的弱点是起步加速略慢，但短时间内即可达到极速状态。在大多数竞速场景中，这款车都能位列顶尖梯队。',
  compatibility: '雷诺特技车与多数辅助型和速度型宠物都有良好的兼容性，特别推荐搭配小白龙、幻翼天马等高级宠物，能进一步增强其速度和稳定性优势。',
  properties: [
    { label: '平跑极速', value: '86.5 km/h' },
    { label: '氮气极速', value: '104.5 km/h' },
    { label: '车重', value: '1.8 t' },
    { label: '飘逸速率', value: '92%' },
    { label: '摩擦系数', value: '0.65' },
    { label: '最小转向', value: '0.42' },
    { label: '最大转向', value: '0.87' },
    { label: '悬挂', value: '专业减震' }
  ],
  comments: [
    {
      username: '竞速大师',
      date: '2023-07-15',
      rating: 5,
      content: '用了三年的雷诺，依然是竞速第一选择。虽然入手和强化成本高，但绝对值得投资，尤其是在高级别比赛中，优势非常明显。',
      likes: 42
    },
    {
      username: '飞车玩家',
      date: '2023-07-10',
      rating: 4,
      content: '雷诺特技车确实强，但不适合新手，操作难度较大。需要一定的驾驶技巧才能发挥其性能，新手可能需要适应一段时间。',
      likes: 28
    }
  ]
})

// 相关赛车数据
const relatedCars = ref([
  { name: '流星', type: 'B车', level: 'A级', rating: '4.7', bgColor: '#ff6b6b' },
  { name: '剃刀', type: 'A车', level: 'A级', rating: '4.6', bgColor: '#20c997' },
  { name: '银色幻影', type: 'S车', level: 'S级', rating: '4.8', bgColor: '#fd7e14' }
])

onMounted(() => {
  // 在实际应用中，这里会从API获取详细数据
  console.log('获取赛车ID:', carId.value)
})
</script>

<style scoped>
.detail-header {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.detail-image {
  width: 400px;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}

.image-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.image-nav-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

.image-nav-dot.active {
  background: white;
}

.detail-info {
  flex: 1;
}

.detail-title {
  font-size: 28px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-title .btn-group {
  display: flex;
  gap: 10px;
}

.detail-meta {
  display: flex;
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

.detail-meta div {
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.detail-meta i {
  margin-right: 5px;
}

.rating-large {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}

.rating-large .stars {
  color: #ff9800;
  font-size: 24px;
}

.rating-large .rating-value {
  font-size: 24px;
  font-weight: bold;
}

.rating-large .rating-count {
  color: #666;
  font-size: 14px;
}

.property-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.property-table th, .property-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.property-table th {
  background: #f5f7fa;
  font-weight: normal;
  color: #666;
  width: 40%;
}

.rating-section {
  margin: 20px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
}

.rating-section h3 {
  margin-bottom: 15px;
}

.star-rating {
  font-size: 30px;
  color: #ddd;
}

.star-rating i {
  cursor: pointer;
  margin-right: 5px;
}

.star-rating i.fas {
  color: #ff9800;
}

.tabs {
  margin-top: 40px;
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.tab {
  padding: 10px 5px;
  cursor: pointer;
  position: relative;
  color: #666;
}

.tab.active {
  color: #0078ff;
  font-weight: bold;
}

.tab.active:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #0078ff;
}

.tab-content {
  margin-bottom: 30px;
  line-height: 1.6;
}

.comments-section {
  margin-top: 20px;
}

.comment-form {
  margin-bottom: 30px;
}

.comment-form textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.commenter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.commenter-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ddd;
  overflow: hidden;
}

.commenter-name {
  font-weight: bold;
}

.comment-date {
  color: #888;
  font-size: 14px;
}

.comment-content {
  margin-bottom: 10px;
}

.comment-actions {
  display: flex;
  gap: 15px;
  color: #666;
  font-size: 14px;
}

.comment-action {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.related-section {
  margin-top: 40px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.related-section h2 {
  margin-bottom: 20px;
  font-size: 20px;
}

@media (max-width: 768px) {
  .detail-header {
    flex-direction: column;
  }
  
  .detail-image {
    width: 100%;
  }
  
  .tabs {
    overflow-x: auto;
    padding-bottom: 5px;
  }
}
</style> 